Beginnen met React

Voorkennis

Er zijn een paar dingen die je van tevoren moeten weten voordat je begint met React. Als moet kunnen werken met JavaScript of met de DOM.

1. kennis van HTML & CSS.
2. basiskennis van JavaScript-programmeren.
3. basisbegrip van de DOM.
4. ES6-syntaxis en functies.

Doelstelling

1. De verschillende manieren leren om React te installeren
2. kennis maken React-concepten en verwante termen, zoals Babel, JSX, functie- en klassencomponenten, props, state en levenscyclus.
3. React leren gebruiken in een HTML pagina.

Leerpad

1. We beginnen met React in de browser te leren. Daarvoor moeten we weinig installeren en kunnen we toch de basisconcepten van React leren.
   1. React - Knooppunten
      
   2. React - JSX - JavaScript en XML
      
   3. React - Componenten
   4. React - state en levenscyclus
2. React Developer Tools installeren
   1. Firefox
   2. Chrome

Opdracht

1. Probeer de voobeelden uit het lesmateriaal zelf uit.
2. Maak een static-react/marvel-like.html bestand gebaseerd op static-react/class-component.html. Voeg er een eigen selectie van 5 Marvel personnages aan toe. Je kan de personnages kiezen uit één van de bestanden in de map static-react/data. Daar vind je de namen en de url's naar de afbeeldingen. Je hebt dus 3 keuzes, die van John, Farah en jezelf.
3. Refactor de LikeButton component
   1. breek de component op in drie afzonderlijke componenten:
      1. AButton:
         1. functie-component
         2. met ingebouwde stijl
         3. parameters:
            1. onClick eventafhandelaar
            2. caption
      2. ALabel
      3. functie-component
      4. met ingebouwde stijl
      5. parameter
         1. caption
      6. LikePanel
      7. klassencomponent
         1. onthoudt in de eigenschap likes van de state hoeveel keer er op de knop is gedrukt
      8. plaats al die componenten in het bestand met de naam js/ui-controls.js
      9. Voeg aan elk personnage in het static-react/marvel-like.html bestand net onder de afbeelding van het personnage een LikePanel toe.
      10. Synchroniseer met Bitbucket

Bronnen

1. React, A JavaScript library for building user interfaces
2. Getting Started, een overzicht van de React documentatie en hulpmiddelen
3. Tania Rascia, Getting Started with React – An Overview and Walkthrough, August 19, 2018